<template>
  <div class="rank-list">
    <div v-if="!!rankList" class="rank-list_title">{{!!!Number(rankType) ? '男生' : '女生' }}</div>
    <group v-if="!!rankList" gutter="0">
      <cell v-for="item in rankList" v-if="!!!item.collapse" :title="item.title">
        <img slot="icon" :src="'http://statics.zhuishushenqi.com' + item.cover" alt="" width="20" style="display:block;margin-right:6px;">
      </cell>
      <cell
        title="别人家的排行榜"
        is-link
        :border-intent="false"
        :arrow-direction="!!collapse ? 'up' : 'down'"
        @click.native="collapse = !collapse"
      >
        <img slot="icon" src="../fonts/other.svg" alt="" width="20" style="display:block;margin-right:6px;">
      </cell>
      <template v-if="!!collapse">
        <cell-box class="sub-item" v-for="other in rankList" v-if="other.collapse" style="padding-left: 3rem;">{{other.title}}</cell-box>
      </template>
    </group>
  </div>
</template>
<script>
import { Cell, Group, CellBox, CellFormPreview } from 'vux';

export default {
  components: {
    Cell,
    Group,
    CellBox,
    CellFormPreview
  },
  props: {
    rankList: {
      type: Array,
      required: true
    },
    rankType: {
      type: String,
      defalute: 0
    },
  },
  data() {
    return {
      collapse: false
    };
  }
};
</script>
<style lang="scss" scoped>
  @function r($px) {
    @return ($px / 14 ) + rem;
  }
  .rank-list {
    &_title {
      height: r(40);
      line-height: r(40);
      padding-left: 1rem;
      font-size: 1rem;
      font-weight: 600;
      background-color: #f9f0f0;
    }
  }
</style>
